<script setup>
import {uploadUserHaderApi, modifyUserHaderApi} from "@/api/user.js"
import  {storeToRefs} from "pinia"
import {ref} from "vue"
import Message from "@/pulging/Message/js/Message.js"
import {useUserStore} from "@/stores/user.js"
const userStore = useUserStore()
const {userInfo} = storeToRefs(userStore)
const {saveUserInfo} = userStore



console.log(userInfo);

/* 一个临时存放头像的 */
let imgUrl = ref(userInfo.value.head)

// var fs = require('fs');

const emit = defineEmits(['closeModel'])

const close = () => {
  imgUrl = ""
  emit('closeModel')
}

/* 加载头像 */
const onloadImg =  async(e) => {
  const file = e.target.files[0]
  const data  = new FormData() 
  data.append('multipartFile', file)
  let res = await uploadUserHaderApi(data)
  if (res.data.message == "上传成功") {
    imgUrl.value = res.data.data
    console.log(imgUrl);
    // userInfo.value.head = res.data.data
    // saveUserInfo(userInfo.value)
    imgUrl = res.data.data
  } else {
    Message({type:"warn", text: "选择头像失败请重新选择"})
  }
}

/* 上传修改 */

const modifyUserHader = async()=> {
  const data = {head: imgUrl.value, name:"", address: ""}
  let res = await modifyUserHaderApi(data)
  console.log(res);
  if (res.data.message == "修改成功") {
      userInfo.value.head = res.data.data
      saveUserInfo(userInfo.value)
      Message({type:"success", text:"头像修改成功"})
      setTimeout(close,250)
  } else {
    Message({type:"warn", text:"头像修改失败"})
  }
}


</script>

<template>
  <Transition name="modal">
    <div  class="modal-mask">
      <div class="modal-container">
        <div class="modal-header">
         <h2>修改头像</h2>
            <span class="icon iconfont" @click="close">&#xe603;</span>
        </div>  

       <div class="model-content">
         <div class="left">
           <label for="head-photo">
            <input type="file" id="head-photo" @change="onloadImg($event)">
            选择你的的头像
           </label>
           
         </div>

          <div class="right">
            <img :src="imgUrl" class="photo" alt="">
            <span>头像预览</span>
            <i>审核通过后展示</i>
          </div>
       </div>

        <div class="modal-footer">
          <button class="ok" @click="modifyUserHader">确认</button>
          <button class="cancal" @click="close">取消</button>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style lang="scss" scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  transition: opacity 0.3s ease;
}

.modal-container {
    width: 12.325rem;
    min-width: 12.325rem;
   
    background: #FFFFFF;
    border-radius: 0.15rem;
    margin: auto;
    box-shadow: 0 0.025rem 0.1rem rgba(0, 0, 0, 0.33);
    transition: all 0.3s ease;
}

.modal-header  {
    display: flex;
    height: 1.1125rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.375rem ;
    border-bottom: 0.025rem solid rgb(245, 245, 245);
    h2 {
        font-size: 0.35rem;
        font-weight: 600;
    }

}


.model-content {
    padding: 0.5rem 0 0.5rem 0.375rem;
    border-bottom: 2px solid #F2F2F2;
    display: flex;
    flex-direction: row;
    .left {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 6.3375rem;
      height: 6.3375rem;
      background: #E6E6E6;
      label  {
        width: 3.3875rem;
        height: 1.1625rem;
        text-align: center;
        background: #139DFF;
        line-height: 0.34rem;
        border: none;
        color: #FFFFFF;
        font-size: 0.35rem;
      }
      input {
        
        opacity: 0;
      }
    }
    .right {
        display: flex;
        padding: 0 1.075rem 0 1.075rem;
        flex-direction: column;
        align-items: center;
        .photo {
          width: 240px;
          height: 240px;
          background: #CCCCCC;
          border-radius: 50%;
        }
        span {
          margin-top: 0.375rem;
          color: #CCCCCC;
          font-size: 0.3rem;
        }
        i {
          margin-top: 0.15rem;
          color: #F84015;
          font-size: 0.35rem;
        }
    }
    
}

.modal-footer {
    padding: 0.3625rem 3.3625rem 0.8625rem 3.3625rem;
    display: flex;
    justify-content: space-between;
    button {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.35rem;
        width: 2.45rem;
        height: 0.9rem;
        background: #139DFF;
        border: none;
    }
    .ok {
        background: #139DFF;
        color: #FFFFFF;
    }
    .cancal {
        background: #139DFF;
        color: #CCCCCC;
        border: 0.025rem solid #CCCCCC;
        background-color: rgb(255, 255, 255);
    }
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * 对于 transition="modal" 的元素来说
 * 当通过 Vue.js 切换它们的可见性时
 * 以下样式会被自动应用。
 *
 * 你可以简单地通过编辑这些样式
 * 来体验该模态框的过渡效果。
 */

.modal-enter-from {
  opacity: 0;
}

.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>